<template>
  <div class="base-page bg-gray-50 min-h-screen">
    <div class="max-w-md mx-auto bg-white rounded-lg shadow-sm overflow-hidden p-4">
      <!-- 页面标题 -->
      <div class="mb-4">
        <h2 class="text-xl font-medium text-gray-800">{{ title }}</h2>
        <p v-if="description" class="text-sm text-gray-500 mt-1">{{ description }}</p>
      </div>
      
      <!-- 页面内容 -->
      <div class="page-content">
        <slot></slot>
      </div>
      
      <!-- 底部操作区 -->
      <div v-if="$slots.footer" class="mt-6 pt-4 border-t border-gray-100">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: ''
  }
});
</script>